<template>
  <div class="home">
    <!-- 只保留点击引导遮罩层 -->
    <div class="guide-overlay" v-if="showGuide" @click="nextGuideStep">
      <!-- 高亮框 -->
      <div class="highlight-box" :style="highlightStyle"></div>
      
      <!-- 引导提示 -->
      <div class="guide-tips" v-if="currentTip" :style="tipStyle">
        <div class="tip-content">
          {{ currentTip.text }}
          <div class="tip-arrow" :class="currentTip.arrowClass"></div>
        </div>
        <div class="tip-next">点击任意处继续</div>
      </div>
    </div>

    <!-- 添加引导提示 -->
    <div class="guide-tips">
      <!-- 导航栏提示 -->
      <div class="tip-box navbar-tip" v-if="showTips.navbar">
        <div class="tip-content">
          这里可以查看你抽中的物品，如果在其他页面就是返回键
          <div class="tip-arrow top-left"></div>
        </div>
      </div>
      <!-- 添加在线人数显示 -->
      <div class="online-users">
        <span class="user-count">在线: {{ userCount }}</span>
        <div class="notification-container">
          <transition-group name="notification" tag="div">
            <div v-for="(notification) in notifications" 
                :key="notification.id" 
                class="notification">
              {{ notification.message }}
            </div>
          </transition-group>
        </div>
      </div>

      <!-- 开始按钮提示 -->
      <div class="tip-box start-tip" v-if="showTips.start">
        <div class="tip-content">
          点击这里开始，注意他们的数字
          <div class="tip-arrow top"></div>
        </div>
      </div>

      <!-- 展示按钮提示 -->
      <div class="tip-box introduce-tip" v-if="showTips.introduce">
        <div class="tip-content">
          要不要进来看看
          <div class="tip-arrow top"></div>
        </div>
      </div>

      <!-- 相册按钮提示 -->
      <div class="tip-box album-tip" v-if="showTips.album">
        <div class="tip-content">
          这个地方弄了好久了
          <div class="tip-arrow right"></div>
        </div>
      </div>

      <!-- 分享按钮提示 -->
      <div class="tip-box share-tip" v-if="showTips.share">
        <div class="tip-content">
          我做的这么用心不得给你的好朋友也看看？？
          <div class="tip-arrow right"></div>
        </div>
      </div>
    </div>

    <!-- 显示二维码的按钮 -->
    <div class="package-btn" @click="openpackage">
      包裹
    </div>
    <div class="album-btn" @click="openAlbum">
      相册 📸
    </div>
    <div class="show-qrcode-btn" @click="showQRCodeAndCopyText">分享</div>
    <!-- 显示 AnimatedQrCode 组件 -->
    <div class="animated-qr-code" v-if="data.showQRCode" >
      <AnimatedQrCode ></AnimatedQrCode>
      <!-- 关闭按钮 --> 
      <div class="close-btn" @click="data.showQRCode = false">×</div>
    </div>

    <!-- 添加背景装饰 -->
    <div class="background-decoration">
      <div v-for="n in 10" :key="n" 
          class="bubble"
          :style="{
            width: `${20 + Math.random() * 30}px`,
            height: `${20 + Math.random() * 30}px`,
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`,
            animationDelay: `${Math.random() * 5}s`
          }">
      </div>
    </div>
    <div class="btn" v-if="!data.raffle_bt" @click="password_bt_click()">密码</div> 
    <!-- 导航栏 开始 -->
    <div class="navbar" @click="model_bt_click()">
      <img src="../assets/img/daohang.png" alt="导航" class="navbar_img">
    </div>
    <!-- 导航栏 结束 -->
    <!-- 奖励 start -->
    <TransitionGroup tag="ul" name="reward" class="container">
      <li v-for="item in items" class="item" :key="item" @click="remove(item)">
        <div class="item_img_box">
          <img :src="item.img" alt="" class="item_img">
        </div>
        <div class="text_time_box">
          <div class="text_time">
            <div class="text">{{item.name}}</div>
            <div class="time">{{item.time}}</div>
          </div>
        </div>
      </li>
    </TransitionGroup>
    <!-- 奖励 end -->
    
    <!-- 内容 开始 -->  
    <Transition name="raffle-bt">
      <div class="raffle_bt_start" v-if="data.raffle_bt" @click.stop="raffle_bt_click()">开始</div>
    </Transition>
    <Transition name="raffle-bt">
      <div class="raffle_bt_start_Introduce" v-if="data.raffle_bt" @click.stop="raffle_bt_click_Introduce()">展示</div>
    </Transition>
    <div class="show_box" v-if="!data.raffle_bt" @click="numbers_s_bt_click()">
      <img :src="data.img_random.img" alt="红包" class="show_box_img">
    </div>
    <Transition name="fade">
      <div class="raffle_bt" v-if="!data.raffle_bt" @click="f_reward()">抽奖</div>
    </Transition>
    <Transition name="fade">
      <div class="raffle_bt_cancel" v-if="!data.raffle_bt" @click.stop="raffle_bt_click()">取消</div>
    </Transition>
    <!-- 内容 结束 -->  
    <!-- 流星雨 -->
    <div id="stars">
      <div class="star" style="top: 0px;left: 500px;"></div>
    </div>

  </div>
  <ModelBox 
    v-model:isvidel="data.isvidel"
    :reward_list_z="reward_list_z"
  ></ModelBox>
  <PassWord :isvidel="data.isvidel_pw"></PassWord>
  <NumberBox :isvidel="data.isvidel_number" :reward_list_z="data.img_random"></NumberBox>
  <!-- 添加二维码弹窗 -->
  <transition name="qr-fade" appear>
    <div class="qr-modal" v-if="data.showQRCode" @click.stop>
      <div class="qr-content">
        <AnimatedQrCode :href="shareUrl" />
        <div class="close-btn" @click.stop="closeQRCode">×</div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref,onMounted, reactive, onUnmounted } from 'vue';
import ModelBox from '@/components/ModelBox.vue';
import NumberBox from '@/components/NumberBox.vue';
import PassWord from '@/components/PassWord.vue';
import AnimatedQrCode from '@/components/AnimatedQrCode.vue';
import router from '@/router';
import socket from '@/socket'; // 使用配置好的 socket 实例
let data = reactive({
  raffle_bt:true, //点击开始
  img_random:{
    img:require('@/assets/img/hongbao.png'), //展示抽选图片
    number:13,
  },
  raffle_start:true, //礼物抽选开始
  isvidel:false,//显示模态框
  isvidel_pw:false,
  isvidel_number:false,
  showQRCode:false,
})

// 通知栏数组
const getInitialItems = () => []
const items = ref(getInitialItems())
let id = items.value.length + 1

// 奖励数组
let reward_list = reactive([
  {
    img: require('@/assets/img/hongbao.png'),
    name:'真中了红包/(ㄒoㄒ)/~~',
    number:13
  },{
    img: require('@/assets/img/libao.png'),
    name:'也是想吃点东西了(*^_^*)',
    number:23
  },{
    img: require('@/assets/img/shupian_.png'),
    name:'这个也还不赖嘛',
    number:9
  }
])
// 真正的抽奖数组
let z_reward_list = reactive([
  {
    img: require('@/assets/img/latiao.png'),
    name:'辣条',
    number:1
  },{
    img: require('@/assets/img/hongbao1.png'),
    name:'红包',
    number:2
  },{
    img: require('@/assets/img/icon-.png'),
    name:'衣服',
    number:3
  },{
    img: require('@/assets/img/kaoxiang-mianbaoa.png'),
    name:'面包',
    number:4
  },{
    img: require('@/assets/img/xinxi.png'),
    name:'一封信',
    number:5
  },{
    img: require('@/assets/img/sucaizhuangshi.png'),
    name:'饰品',
    number:6
  },{
    img: require('@/assets/img/tangguo.png'),
    name:'糖果',
    number:7
  },{
    img: require('@/assets/img/tangmumao-.png'),
    name:'谢谢惠顾',
    number:8
  },{
    img: require('@/assets/img/wenduchuanganqi.png'),
    name:'热水',
    number:9
  },{
    img: require('@/assets/img/xie.png'),
    name:'鞋子',
    number:10
  }
])

// 添加 socket 相关的响应式数据
const userCount = ref(0);
const notifications = ref([]);
let notificationId = 0;

// 监听 socket 事件
onMounted(() => {
  socket.on('connect', () => {
    console.log('已连接到服务器');
  });

  socket.on('userCount', (count) => {
    userCount.value = count;
  });

  socket.on('userJoined', (message) => {
    const notification = {
      id: notificationId++,
      message
    };
    notifications.value.push(notification);
    
    // 5秒后移除通知
    setTimeout(() => {
      notifications.value = notifications.value.filter(n => n.id !== notification.id);
    }, 5000);
  });
});

function reward_list_z_fn(){
  let list = localStorage.getItem('z_reward_list_z');
  if(list != null){
    // 分析数组
    list = JSON.parse(list)
    return list
  }else{
    // 返回空数组
    return [];
  }
}
// 中奖数组
let reward_list_z = reactive(reward_list_z_fn())


// 时间转换
function time_zhuan(){
  // 获取当前日期和时间
  const currentDate = new Date();

  // 获取年、月、日、时、分、秒、毫秒
  const year = currentDate.getFullYear();
  const month = String(currentDate.getMonth() + 1).padStart(2, '0'); 
  const day = String(currentDate.getDate()).padStart(2, '0');
  const hour = String(currentDate.getHours()).padStart(2, '0');
  const minute = String(currentDate.getMinutes()).padStart(2, '0');
  const second = String(currentDate.getSeconds()).padStart(2, '0');
  const millisecond = String(currentDate.getMilliseconds()).padStart(3, '0');

  // 组合成指定格式的字符串
  const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}.${millisecond}`;

  return formattedDate;
}
// 开始抽奖
function  raffle_bt_click (){
  data.raffle_bt = !data.raffle_bt
}

// 开始抽奖
function  raffle_bt_click_Introduce (){
  router.push('/introduce')
}

function  model_bt_click (){
  data.isvidel = !data.isvidel
}

function  password_bt_click (){
  data.isvidel_pw = !data.isvidel_pw
}

function  numbers_s_bt_click (){
  data.isvidel_number = !data.isvidel_number
}
// 抽奖随机
function fn_reward_random(){
  // 生成0-100整数中的随机一个
  let random = Math.floor(Math.random() * 100); 
  if(random>=0 && random<=30){
    return 7;
  }else if(random>30 && random<=50){
    return 0;
  }else if(random>50 && random<=70){
    return 3;
  }else if(random>70 && random<=80){
    return 6;
  }else if(random>80 && random<=90){
    return 4;
  }else if(random>90 && random<=92){
    return 1;
  }else if(random>92 && random<=95){
    return 2;
  }else if(random>95 && random<=97){
    return 5;
  }else if(random>97 && random<=99){
    return 9;
  }else if(random == 100){
    return 8;
  }
}
function fn_reward_randoms(){
  // 生成0-100整数中的随机一个
  let random = Math.floor(Math.random() * reward_list.length);
  return random;
}
// 抽奖
function f_reward(){
  let randoms = 0;
  let eat = null;
  if(data.raffle_start){
    // 点击一次后关闭点击
    data.raffle_start = false;
    const storedData = localStorage.getItem('z_reward_list');
    if(storedData != null){
      // 替换为真真的抽奖数组
      reward_list = z_reward_list
      eat = setInterval(() => {
        randoms = fn_reward_random();
        data.img_random.img = reward_list[randoms].img;
        data.img_random.number = reward_list[randoms].number;
      }, 100);
    }else{
      eat = setInterval(() => {
        randoms = fn_reward_randoms();
        data.img_random.img = reward_list[randoms].img;
        data.img_random.number = reward_list[randoms].number;
      }, 100);
    }
      

    setTimeout(()=>{
      clearInterval(eat)
      data.raffle_start = true;
      insert(reward_list[randoms]);
      const storedData = localStorage.getItem('z_reward_list');
      if(storedData != null){
        const list_arrray = localStorage.getItem('z_reward_list_z');
        if(!list_arrray){
          // 如果没有存储过就先设置
          localStorage.setItem('z_reward_list_z', JSON.stringify(reward_list_z));
        }
        else{
          // 更新中将数组
          localStorage.setItem('z_reward_list_z', JSON.stringify(reward_list_z));
        }
      }
      
    },3000)
  }
  
}

// 通知栏移出事件
function remove(item) {
  const i = items.value.indexOf(item)
  if (i > -1) {
    items.value.splice(i, 1)
  }
}

// 通知栏添加事件
function insert(item) {
  // 保存id
  let id_ites = id++;
  let lists = {
    img:item.img,
    name:item.name,
    id:id_ites,
    time:time_zhuan(),
  }
  items.value.push(lists)
  reward_list_z.push(lists)
  // 倒计时移出
  setTimeout(()=>{
    const targetElement = items.value.find((element) => element.id === id_ites);
    if (targetElement) {
      remove(targetElement)
    } else {
        console.log("未找到id的元素");
    }
  },3000)
}

// 添加动态星星生成
onMounted(() => {     
  const starsContainer = document.getElementById('stars');
  
  function createStar() {
    const star = document.createElement('div');
    star.className = 'star';
    star.style.left = `${Math.random() * window.innerWidth}px`;
    star.style.top = `${Math.random() * window.innerHeight}px`;
    starsContainer.appendChild(star);
    
    setTimeout(() => {
      star.remove();
    }, 1500);
  }
  
  setInterval(createStar, 300);
});

onUnmounted(() => {
  // 组件卸载时移除类
  document.body.classList.remove('surprise', 'slide-fade-enter-active', 'slide-fade-enter-to');
  socket.off('connect');
  socket.off('userCount');
  socket.off('userJoined');
});
// 复制文本到剪贴板的函数
function copyToClipboard(text) {
  return new Promise((resolve, reject) => {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    try {
      document.execCommand('copy');
      document.body.removeChild(textarea);
      resolve();
    } catch (err) {
      document.body.removeChild(textarea);
      reject(err);
    }
  });
}
// 显示二维码并复制文本
const showQRCodeAndCopyText = async () => {
  data.showQRCode = true;
  await copyToClipboard('🎉网站地址：http://danandgift.free3v.vip/');
};

const openpackage = () => {
  router.push('/Interaction');
};

const openAlbum = () => {
  router.push('/album');
};

const closeQRCode = () => {
  data.showQRCode = false;
};

// 控制提示显示状态
const showTips = ref({
  navbar: false,
  start: false,
  introduce: false,
  album: false,
  share: false
});

// 修改引导步骤配置，调整提示位置
const guideSteps = [
  {
    target: '.navbar',
    text: '这里可以查看你抽中的物品，如果在其他页面就是返回键',
    position: 'bottom-right', // 调整位置
    arrowClass: 'top-left'
  },
  {
    target: '.raffle_bt_start',
    text: '点击这里开始，注意他们的数字',
    position: 'right', // 改为右侧显示
    arrowClass: 'left'
  },
  {
    target: '.raffle_bt_start_Introduce',
    text: '要不要进来看看',
    position: 'right', // 改为右侧显示
    arrowClass: 'left'
  },
  {
    target: '.album-btn',
    text: '这个地方弄了好久了',
    position: 'left', // 保持左侧显示
    arrowClass: 'right'
  },
  {
    target: '.show-qrcode-btn',
    text: '我做的这么用心不得给你的好朋友也看看？？',
    position: 'left', // 保持左侧显示
    arrowClass: 'right'
  }
];

const showGuide = ref(false);
const currentStepIndex = ref(0);
const highlightStyle = ref({});
const tipStyle = ref({});
const currentTip = ref(null);

// 开始引导
onMounted(() => {
  const hasShownGuide = localStorage.getItem('hasShownGuide');
  if (!hasShownGuide) {
    setTimeout(() => {
      showGuide.value = true;
      updateGuideStep();
    }, 1000);
  }
});

// 更新引导步骤
function updateGuideStep() {
  const step = guideSteps[currentStepIndex.value];
  if (!step) {
    finishGuide();
    return;
  }

  const element = document.querySelector(step.target);
  if (element) {
    const rect = element.getBoundingClientRect();
    
    // 更新高亮框位置
    highlightStyle.value = {
      top: `${rect.top - 4}px`,
      left: `${rect.left - 4}px`,
      width: `${rect.width + 8}px`,
      height: `${rect.height + 8}px`
    };

    // 更新提示框位置
    currentTip.value = step;
    updateTipPosition(rect, step.position);
  }
}

// 更新提示框位置
function updateTipPosition(targetRect, position) {
  const margin = 20;
  const tipWidth = 250;
  const tipHeight = 80;
  let top, left;

  switch (position) {
    case 'bottom-right':
      top = targetRect.bottom + margin;
      left = targetRect.right - tipWidth / 2;
      break;
    case 'right':
      top = targetRect.top + (targetRect.height - tipHeight) / 2;
      left = targetRect.right + margin;
      break;
    case 'left':
      top = targetRect.top + (targetRect.height - tipHeight) / 2;
      left = targetRect.left - tipWidth - margin;
      break;
    default:
      top = targetRect.bottom + margin;
      left = targetRect.left + (targetRect.width - tipWidth) / 2;
  }

  // 确保提示框不会超出屏幕
  const screenPadding = 10;
  left = Math.max(screenPadding, Math.min(left, window.innerWidth - tipWidth - screenPadding));
  top = Math.max(screenPadding, Math.min(top, window.innerHeight - tipHeight - screenPadding));

  tipStyle.value = {
    top: `${top}px`,
    left: `${left}px`,
    width: `${tipWidth}px`
  };
}

// 下一步
function nextGuideStep() {
  currentStepIndex.value++;
  updateGuideStep();
}

// 完成引导
function finishGuide() {
  showGuide.value = false;
  localStorage.setItem('hasShownGuide', 'true');
}
</script>

<style lang="scss" scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: #ffffff;
  animation: 
    pageEnter 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    gradientBG 15s ease infinite;
  min-height: 100vh;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .online-users {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .user-count {
      background: rgba(255, 255, 255, 0.9);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      color: #333;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(4px);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    .notification-container {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 10px;
      width: 200px;
    }

    .notification {
      background: rgba(255, 255, 255, 0.9);
      padding: 10px;
      margin-top: 8px;
      border-radius: 8px;
      font-size: 13px;
      color: #333;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(4px);
      animation: slideIn 0.3s ease-out;
    }
  }

  // 通知动画
  .notification-enter-active {
    animation: slideIn 0.3s ease-out;
  }

  .notification-leave-active {
    animation: slideOut 0.3s ease-in;
  }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOut {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  // 内容容器
  .content-wrapper {
    opacity: 0;
    animation: contentFadeIn 0.8s ease forwards;
    animation-delay: 0.4s;
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

// 页面进场动画
@keyframes pageEnter {
  0% {
    opacity: 0;
    transform: scale(1.1) translateZ(0);
    filter: blur(10px);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05) translateZ(0);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0);
  }
}

// 内容淡入动画
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 修改渐变背景动画
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

// 优化按钮动画
.show-qrcode-btn,
.album-btn,
.package-btn {
  opacity: 0;
  animation: buttonSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.show-qrcode-btn {
  animation-delay: 0.6s;
}
.package-btn{
  animation-delay: 0.8s;
}
.album-btn {
  animation-delay: 0.8s;
}

@keyframes buttonSlideIn {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

// 优化背景装饰动画
.background-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;

  .bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    opacity: 0;
    animation: 
      float-bubble 8s ease-in-out infinite,
      bubbleAppear 0.8s ease forwards;
  }
}

@keyframes bubbleAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float-bubble {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.1);
  }
}

.show-qrcode-btn {
  z-index: 99;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  color: #303133;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}

.animated-qr-code {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #000000cc;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
  
  &:hover {
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
  }
}

.bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float-bubble 8s ease-in-out infinite;
}

@keyframes float-bubble {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.1);
  }
}
.btn{
  z-index:99;
  position: fixed;
  top: 90%;
  left: 39%;
  color: rgba(15, 15, 15, 0.089);
}
.container {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  box-sizing: border-box;
  list-style-type: none;
  .item{
    z-index: 100;
    max-width: 260px;
    height: 60px;
    margin: 5px auto;
    color: #303133;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    &:hover{
      transform: scale(1.02);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    .item_img_box{
      width: 62px;
      height: 100%;
      padding: 8px;
      box-sizing: border-box;
      margin-right: 6px;
      object-fit: cover;
      .item_img{
        width: 100%;
        height: 100%;
      }
    }
    .text_time_box{
      display: flex;
      justify-content: center;
      align-items: center;
      .text_time{
        .text{
          color: #303133;
          font-size: 14px;
        }
        .time{
          color: #909399;
          font-size: 12px;
        }
      }
    }
    
  }
}
.navbar{
  z-index: 99;
  position: fixed;
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;
  padding: 8px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  &:hover{
    transform: rotate(90deg);
  }
  .navbar_img{
    width: 100%;
    height: 100%;
  }
}
.raffle_bt_start{
  z-index: 99;
  position: relative;
  top:50%;
  margin: 0 auto;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #E6A23C;
  border-radius: 5px; 
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  &:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}
.raffle_bt_start_Introduce{
  z-index: 99;
  position: relative;
  top:55%;
  margin: 0 auto;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #6dcc35;
  border-radius: 5px; 
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  &:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}
.show_box {
  z-index: 99;
  position: relative;
  top: 15%;
  margin: 0 auto;
  width: 220px;
  height: 220px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: prize-float 4s ease-in-out infinite;
  transform-style: preserve-3d;
  perspective: 1000px;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.2)
    );
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
  }

  .show_box_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  &:hover {
    animation-play-state: paused;
    
    .show_box_img {
      transform: scale(1.1) rotate(5deg);
    }
  }
}

@keyframes prize-float {
  0% {
    transform: translateY(0) rotateX(0) rotateY(0);
    filter: brightness(1);
  }
  25% {
    transform: translateY(-15px) rotateX(5deg) rotateY(-5deg);
    filter: brightness(1.1);
  }
  50% {
    transform: translateY(0) rotateX(0) rotateY(5deg);
    filter: brightness(1);
  }
  75% {
    transform: translateY(10px) rotateX(-5deg) rotateY(-2deg);
    filter: brightness(0.95);
  }
  100% {
    transform: translateY(0) rotateX(0) rotateY(0);
    filter: brightness(1);
  }
}

// 修改展示框的进出场动画
.show_box-enter-active {
  animation: prize-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.show_box-leave-active {
  animation: prize-out 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes prize-in {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-45deg) translateY(100px);
    filter: blur(10px);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2) rotate(15deg) translateY(-20px);
    filter: blur(0);
  }
  75% {
    transform: scale(0.9) rotate(-5deg) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0) translateY(0);
  }
}

@keyframes prize-out {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(45deg) translateY(-100px);
    filter: blur(10px);
  }
}
.raffle_bt{
  z-index: 99;
  position: relative;
  top:20%;
  margin: 0 auto;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #409EFF;
  border-radius: 5px; 
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  &:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}
.raffle_bt_cancel{
  z-index: 99;
  position: relative;
  top:25%;
  margin: 0 auto;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #F56C6C;
  border-radius: 5px; 
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  &:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}

.moving-div {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: fixed;
  transition: all 0.5s;
}
.box_big{
z-index: -2;
width: 20px;
height: 20px;
background-color: black;
bottom: -30px;
right: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
position: fixed;
transition: all 3s;
}

#stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}

.star {
position: absolute;
width: 2px;
height: 2px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: shooting 1.5s linear infinite;
opacity: 0;
}

@keyframes shooting {
0% {
  transform: translateX(0) translateY(0) rotate(45deg);
  opacity: 1;
}
100% {
  transform: translateX(100vw) translateY(100vh) rotate(45deg);
  opacity: 0;
}
}


/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.raffle-bt-enter-active {
transition: all 0.3 s ease-out;
}

.raffle-bt-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.raffle-bt-enter-from,
.raffle-bt-leave-to {
transform: translateX(20px);
opacity: 0;
}

.show_box-enter-active {
animation: bounce-in 0.5s;
}
.show_box-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
  transform: scale(0);
}
50% {
  transform: scale(1.25);
}
100% {
  transform: scale(1);
}
}

/* 进入动画的起始状态 */
.fade-down-enter-active,
.fade-down-leave-active {
  transition: all 1s ease;
}

.fade-down-enter-from {
  transform: translateY(-100%);
  opacity: 0;
}

.fade-down-enter-to {
  transform: translateY(0);
  opacity: 1;
}

/* 离开动画的起始状态 */
.fade-down-leave-from {
  transform: translateY(0);
  opacity: 1;
}

.fade-down-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

/* 1. 声明过渡效果 */
.reward-move,
.reward-enter-active,
.reward-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.reward-enter-from,
.reward-leave-to {
opacity: 0;
transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
    以便正确地计算移动时的动画效果。 */
.reward-leave-active {
position: absolute;
}
.package-btn{
  z-index: 99;
  position: fixed;
  bottom: 140px;  // 位于分享按钮上方
  right: 20px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  color: #303133;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}
.album-btn {
  z-index: 99;
  position: fixed;
  bottom: 80px;  // 位于分享按钮上方
  right: 20px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  color: #303133;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}

// 二维码弹窗样式
.qr-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;

  .qr-content {
    position: relative;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
    min-height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1);
    transform-origin: center;
    will-change: transform, opacity;
    
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 15px;
      padding: 2px;
      background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.2)
      );
      mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
  }

  .close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.1);
    z-index: 2;

    &:hover {
      background: rgba(255, 0, 0, 0.8);
      transform: rotate(180deg) scale(1.1);
      border-color: rgba(255, 255, 255, 0.2);
    }
  }
}

// 二维码动画
.qr-fade-enter-active {
  animation: qrEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qr-fade-leave-active {
  animation: qrLeave 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes qrEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.8) rotate(-8deg);
    filter: blur(10px);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -52%) scale(1.1) rotate(3deg);
    filter: blur(0);
  }
  75% {
    transform: translate(-50%, -49%) scale(0.95) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
    filter: blur(0);
  }
}

@keyframes qrLeave {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.85) rotate(6deg);
    filter: blur(8px);
  }
}

// 引导提示样式
.guide-tips {
  .tip-box {
    position: fixed;
    z-index: 1000;
    animation: tipFadeIn 0.3s ease-out;

    &.navbar-tip {
      top: 80px;
      left: 20px;
    }

    &.start-tip {
      position: fixed;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -100%);

      .tip-content {
        position: relative;
        
        .tip-arrow {
          position: absolute;
          bottom: -16px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border: 8px solid transparent;
          border-top-color: rgba(0, 0, 0, 0.8);
        }
      }
    }

    &.introduce-tip {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -100%);

      .tip-content {
        position: relative;
        
        .tip-arrow {
          position: absolute;
          bottom: -16px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border: 8px solid transparent;
          border-top-color: rgba(0, 0, 0, 0.8);
        }
      }
    }

    &.album-tip {
      bottom: 90px;
      right: 150px;
    }

    &.share-tip {
      bottom: 30px;
      right: 150px;
    }

    .tip-content {
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 14px;
      max-width: 200px;
      backdrop-filter: blur(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
  }
}

@keyframes tipFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 引导遮罩层
.guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  cursor: pointer;

  // 高亮框
  .highlight-box {
    position: absolute;
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
    pointer-events: none;
  }

  // 引导提示
  .guide-tips {
    position: absolute;
    z-index: 10000;
    transition: all 0.3s ease;
    
    .tip-content {
      background: rgba(255, 255, 255, 0.95);
      color: #333;
      padding: 16px;
      border-radius: 8px;
      font-size: 14px;
      max-width: 250px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      position: relative;
    }

    .tip-next {
      text-align: center;
      color: #fff;
      font-size: 12px;
      margin-top: 8px;
      opacity: 0.8;
    }

    .tip-arrow {
      position: absolute;
      width: 0;
      height: 0;
      border: 8px solid transparent;

      &.top-left {
        top: -16px;
        left: 20px;
        border-bottom-color: rgba(255, 255, 255, 0.95);
      }

      &.bottom {
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        border-top-color: rgba(255, 255, 255, 0.95);
      }

      &.right {
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
        border-left-color: rgba(255, 255, 255, 0.95);
      }
    }
  }
}
</style>
